import { PackageManagerTabs } from '@theme';
import Preparation from '../../shared/preparation.md'
import YarnProblem from '../../shared/problems/yarnProblem.md'

# Vue3

在这篇文档中，你可以了解到如何基于 Emp 来构建一个 Vue3 应用。


<Preparation />

## 创建 Vue3 项目

你可以使用 `create-emp` 来创建一个 Emp + Vue3 的项目，调用以下命令：

<PackageManagerTabs command="create emp@latest" />

然后在 `Select framework` 时选择 `Vue 3` 即可。

## 安装依赖
在创建完项目后，我们进入代码的根目录，安装项目依赖，推荐使用 `PNPM` 进行安装：

<PackageManagerTabs command="install" />

## 运行 Vue3 项目
在安装完项目依赖后，启动项目：

<PackageManagerTabs command="dev" />

运行成功后，你可以访问 `http://localhost:8000/` 进行查看。

## 目录约定

```
── node_modules        // 依赖目录
├── src                 
|   ├── App.vue         // 应用主组件
|   ├── boostrap.tsx    // 项目入口文件
|   ├── main.ts         // 主要入口文件
|   ├── logo.svg        // 项目 logo
|   └── shims-vue.d.ts  // 类型声明文件
├── .gitignore          // Git 忽略文件列表
├── emp-config.js       // emp 配置文件
├── package.json        // 项目依赖及配置信息
├── tsconfig.json       // TypeScript 配置文件
└── README.md           // 项目说明文档
```

## 常见问题

<YarnProblem />